<template>
	<div>
		<div class="graybg"></div>

		<div class="header header_bg">
			<div class="header_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_center">
				<span class="baiColor">消息</span>
			</div>
		</div>
		
		<div class="center" style="padding-top: 47px;" v-if="holder">
			<div class="content">
				<div class="div3"v-for="(message,index) in messages">
		            <div class="img">
		              	<i class="iconfont">&#xe618;</i>
		            </div>
		            <div class="two">
			          	<div class="left" style="width:58%;">
				            <p>系统消息<span>{{message.date}}</span></p>
				            <p class="ellipsis01" >{{message.m_content}}</p>
			          	</div>
			          	<div class="right" v-if="message.m_type == 3 ? true : false">
			                <button @click="del(index,message.m_id,message.s_type)">删除</button>
			            </div>
			            <div class="right" v-if="message.m_type == 4 ? true : false">
			                <button @click="agree(index,message.m_id,message.s_type)">同意</button>
			                <button @click="reject(index,message.m_id,message.s_type)">拒绝</button>
			            </div>
		            </div>
				</div>
			</div>

		</div>
		<div style="padding-top: 50px;text-align:center;color: #333;" v-else>
			<span>您还没有通知消息</span>
		</div>
	</div>

</template>

<script>
export default {
  data() {
    return {
      holder:true,
      id: "",
      messages: []
    };
  },
  mounted: function() {
    var params = new URLSearchParams();
    var info = window.localStorage.data;
    params.append("token", info); //客户秘钥（信息）
    params.append("type", 1);
    this.$axios({
      url: "Home/Index/msg",
      method: "POST",
      data: params
    })
      .then(res => {
        if (res.data.code == 1) {
        	this.holder = true;
	        this.messages = res.data.data;
	        var messages = res.data.data;
	        this.messages.forEach(function(messages){
	          	if(messages.date.length > 8) {
					messages.date = messages.date.substr(messages.date.length-8);
				}
	        });
        }else if(res.data.code == 2){
        	this.holder = false;
        }else if(res.data.code == 0){
        	console.log("请求失败")
        }
      }).catch(function(err) {
        console.log(err);
      });
  },
  methods: {
    //		    同意
    agree: function(index,mid,type) {
      var params = new URLSearchParams();
      var info = window.localStorage.data;
      params.append("token", info); //客户秘钥（信息）
      params.append("id", mid);
      params.append("type", 1);
      this.$axios({
        url: "One/Social/handleFriendR",
        method: "POST",
        data: params
      }).then(res => {
      	console.log(res.data)
          if (res.data.status == 1) {
            alert("同意请求");
            params.append('token', info);	//客户秘钥（信息）
			params.append('id',mid);
			params.append('s_type',type);
			this.$axios({
			   url:"Home/Index/readMsg",
				method:"post",
				data:params
			  }).then((res)=>{
			  	if(res.data == 1){
			  		this.messages.splice("index",1);
			  	}else{
			  		alert("删除失败");
			  	}
			}).catch(function(err){
				console.log(err)		
			})
            
          }else{
          	alert("请求失败")
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //      拒绝
    reject: function(index,mid,type) {
      var params = new URLSearchParams();
      var info = window.localStorage.data;
      params.append("token", info); //客户秘钥（信息）
      params.append("id", mid);
      params.append("type", 2);
      this.$axios({
        url: "One/Social/handleFriendR",
        method: "POST",
        data: params
      }).then((res) => {
        if (res.data.status == 1) {
            alert("您已拒绝该好友的请求");
            params.append('token', info);	//客户秘钥（信息）
			params.append('id',mid);
			params.append('s_type',type);
			this.$axios({
			   url:"Home/Index/readMsg",
				method:"post",
				data:params
			  }).then((res)=>{
			  	if(res.data == 1){
			  		this.messages.splice("index",1);
			  	}else{
			  		alert("删除失败");
			  	}
			}).catch(function(err){
				console.log(err)		
			});
            
          }else{
          	alert("请求失败")
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //删除消息
    del(index,id,type){
		var info = window.localStorage.data;
		var params = new URLSearchParams();
		params.append('token', info);	//客户秘钥（信息）
		params.append('id',id);
		params.append('s_type',type);
		this.$axios({
		   url:"Home/Index/readMsg",
			method:"post",
			data:params
		  }).then((res)=>{
		  	if(res.data == 1){
		  		alert("删除成功");
		  		this.messages.splice("index",1);
		  	}else{
		  		alert("删除失败");
		  	}
			
		}).catch(function(err){
			console.log(err)		
		})
    }
    
    
    
    
    
  }
};
</script>

<style scoped="scoped">
@import "../css/public.css";
.center {
  width: 95%;
  margin: 0 auto;
}
.content .div3 {
  height: 70px;
  background: #fff;
  overflow: hidden;
  margin: 3px 0px;
  padding: 10px 6px;
  display: flex;
  /*Flex布局*/
  display: -webkit-flex;
  /* Safari */
  align-items: center;
  /*指定垂直居中*/
}

.content .img {
  float: left;
  width: 53px;
  height: 46px;
  border-radius: 50%;
  line-height: 46px;
  text-align: center;
  background: #f0f0f0;
}
.content .img i {
  font-size: 28px;
  color: #f3961f;
}
.content .two {
  width: 100%;
  float: right;
  overflow: hidden;
}
.content .two .left {
  float: left;
  margin-left: 5px;
}
.content .two .right {
  float: right;
}
.content .two .right button {
  background: #ffba01;
  color: #fff;
  padding: 5px 8px;
  margin-top: 10px;
}
.content .two .left p:first-child {
  color: #333333;
  font-size: 15px;
  margin-bottom: 12px;
  overflow: hidden;
}
.content .two .left p:last-child {
  color: #999;
  font-size: 12px;
}
.content .two .left p:first-child span {
  float: right;
  color: #999;
  font-size: 12px;
}
</style>
